<template>
  <button :style="bgColor" @click="btn">{{ title }}</button>
</template>

<script>
export default {
  name: 'ElButton',
  props: ['title', 'type'],
  data () {
    return {}
  },
  methods: {
    btn () {
      this.$emit('click')
    }
  },
  computed: {
    bgColor () {
      let backgroundColor = ''
      let color = ''
      switch (this.type) {
        case '':
          backgroundColor = '#c'
          color = '#333333'
          break
        case 'primary':
          backgroundColor = '#409eff'
          break
        case 'success':
          backgroundColor = '#85ce61'
          break
        case 'info':
          backgroundColor = '#a6a9ad'
          break
        case 'warning':
          backgroundColor = '#ebb563'
          break
        case 'danger':
          backgroundColor = '#f78989'
          break
      }
      return { backgroundColor, color }
    }
  }
}
</script>

<style lang='less' scoped>
button {
  width: 100px;
  height: 40px;
  border: 0;
  color: #fff;
  border-radius: 8px;
  margin-right: 10px;
}
</style>
